<template>
  <div>
    <el-container class="container">
      <el-header class="box navigator scrub hidden-md-and-up" :class="searchItemActive === true ? '': 'headerShadow'" height="3.5em">
        <div style="width: 100%; display: flex; justify-content: space-between;">
          <div style="width: 20em;">
            <button
              class="headerButton"
              v-for="(item, index) in navigatorLeftItems"
              :key="index"
              @click="toPage(item)"
            >
              {{ item }}
            </button>
          </div>
          <div style="width: 12em;">
            <i
              style="margin-left: 1em; font-size: 20px; color: black; line-height: 2.5em;"
              :class="item.class"
              class="icon"
              underline="false"
              v-for="(item, index) in navigatorRightItems"
              :key="index"
              @click="toPage(item.name)"
            />
          </div>
        </div>
      </el-header>
      <el-header class="box navigator scrub hidden-sm-and-down headerShadow"  height="3.5em">
        <div style="width: 70%; display: flex; justify-content: space-between">
          <div>
            <button
              class="headerButton"
              style="margin-left: 2.5em;"
              v-for="(item, index) in navigatorLeftItems"
              :key="index"
              @click="toPage(item)"
            >
              {{ item }}
            </button>
          </div>
          <div>
            <i
              style="margin-left: 20px; font-size: 20px; color: black; line-height: 2.5em;"
              :class="item.class"
              class="icon"
              :underline="false"
              v-for="(item, index) in navigatorRightItems"
              :key="index"
              @click="toPage(item.name)"
            />
          </div>
        </div>
      </el-header>
      <el-main style="margin-top: 4em">
        <div class="box container hidden-sm-and-down">
			<transition name="el-zoom-in-center">
				 <search-card class="search" v-show="searchItemActive" v-on:searchClose='searchItemActive = false'></search-card>
			</transition>
         
          <el-row :gutter="30" style="width: 75%">
            <el-col :lg="7" :md="12">
              <user-card></user-card>
              <link-card style="margin-top: 2em"></link-card>
            </el-col>
            <el-col :lg="11" :md="12">
				<router-view v-loading='this.$articleLoading'></router-view>
            </el-col>
            <el-col :lg="6" class="hidden-md-and-down">
              <classify-card style="margin-bottom: 2em"></classify-card>
              <recommend-card></recommend-card>
            </el-col>
          </el-row>
        </div>
        <div class="hidden-md-and-up" style="margin-top: 3.5em">
          <search-card  v-show="searchItemActive" v-on:searchClose='searchItemActive = false' class="search-mobile"></search-card>
          <router-view style="margin-bottom: 2em"></router-view>
          <user-card style="margin-bottom: 1.5em"></user-card>
          <link-card style="margin-bottom: 1.5em"></link-card>
          <classify-card style="margin-bottom: 1.5em"></classify-card>
          <recommend-card></recommend-card>
        </div>
      </el-main>
    </el-container>
    <div class="bottom"></div>
    
  </div>
</template>
<script>
import UserCard from "./UserCard.vue";
import LinkCard from "./LinkCard.vue";
import ClassifyCard from "./ClassifyCard.vue";
import ArticleCard from "./ArticleCard.vue";
import RecommendCard from "./RecommendCard.vue";
import SearchCard from './SearchCard.vue';
export default {
  components: {
    UserCard,
    LinkCard,
    ClassifyCard,
    ArticleCard,
    RecommendCard,
    SearchCard
  },
  name: "",
  data() {
    return {
      searchItemActive: false,
      navigatorLeftItems: ["主页", "文章", "分类", "关于我"],
      navigatorRightItems: [
        {
          name: "Gitee",
          class: "el-icon-s-promotion"
        },
        {
          name: "搜索",
          class: "el-icon-search"
        },
         {
          name: "登录",
          class: "el-icon-user-solid"
        }
      ],
    };
  },
  methods: {
    toPage(item) {
      let to = '';
      switch(item) {
        case '主页':
          to = 'home'
          break
        case '文章':
          to = 'timeline'
          break
        case '分类':
          to = 'classify'
          break
        case '关于我':
          to = 'about'
          break
        case 'Gitee':
          this.toGitee()
          return
        case '搜索':
          this.searchItemActive = true
          return
        case '登录':
          to = 'login'

      }
      this.$router.push({ name: to })
    },
    toGitee() {
    window.open("https://gitee.com/taoist_awei")
  }
  },
  
};
</script>
<style scoped>
.search-mobile {
  top: 3.5em;
  left: 0;
  position: fixed;
  z-index: 998;
  width: 100vw;
  height: calc(100vh - 3.5em);
}
.search {
  position: fixed;
  top: calc(50% - 20em);
  z-index: 998;
  left: calc(50% - 12.5em);
  width: 25em;
  height: 40em;
}
.container {
  justify-content: flex-start;
}
i:hover {
  color: rgb(50, 155, 240);
}

.headerButton {
  margin-left: 0.5em;
  font-size: 1em;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  color: black;
  margin: 0, 0.5em;
  line-height: 3em;
  padding: 0;
}
.headerButton:hover {
  color: rgb(50, 155, 240);
  font-size: 1em;
}

button:focus {
  outline: none;
}

.navigator {
  position: fixed;
  width: 100vw;
  z-index: 990;
}

.headerShadow {
   box-shadow: 0 0px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.box {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.shade {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 991;
  background-color: rgba(0, 0, 0, 0.4);
}

.scrub {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.button {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: none;
  height: 2.8em;
  background-color: white;
  border-radius: 0.5em;
}

.bottom {
  width: 100%;
  height: 23em;
  margin-bottom: 0;
  background-color: rgb(50, 50, 50);
}
</style>